<template>
<!-- 个人信息 -->
  <uni-card
    title="个人信息"
  >
	<view class="userInfo">
		<image class="avatar" v-if="userStore.userInfo?.avatar" :src="userStore.userInfo?.avatar"/>
		<image class="avatar" v-else src="../../static/userAvatar.jpg"/>
		<view class="info" v-if="userStore.userInfo?.username">{{ userStore.userInfo?.username }}</view>
		<view class="info" v-else>请登录</view>
	</view>
  </uni-card>

<!-- 按钮 -->
  <view>
		// #ifdef H5
		<button class="login" @click="login">登录</button>
    <button class="logout" @click="logout">注销</button>
		// #endif
		// #ifdef APP-PLUS
		<button v-if="userStore.userInfo" class="login" @click="login">切换用户</button>
		<button v-else-if="!isShowLogin" class="login" @click="login">登录</button>
		<button v-else class="login" @click="login">取消登录</button>
    <button class="logout" @click="logout">注销</button>
		// #endif
		// #ifdef MP-WEIXIN
		<button v-if="userStore.userInfo" class="login" @click="login">切换用户</button>
		<button v-else-if="!isShowLogin" class="login" @click="login">登录</button>
		<button v-else class="login" @click="login">取消登录</button>
    <button class="logout" @click="logout">注销</button>
		// #endif
  </view>

<!-- 登录与注册 -->
  <view v-show="isShowLogin" v-if="!isShowRegister">
		<uni-card>
			<uni-forms :model="form" ref="formRef">
				<uni-forms-item name="username" :rules="[{ required: true, errorMessage: '请输入用户名' }]">
					<uni-easyinput prefixIcon="person-filled" type="text" v-model="form.username" placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password" :rules="[{ required: true, errorMessage: '请输入密码' }]">
					<uni-easyinput prefixIcon="locked-filled" type="password" v-model="form.password" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="code" :rules="[{ required: true, errorMessage: '请输入验证码' }]">
					<uni-easyinput class="left" prefixIcon="checkbox"  v-model="form.code"  placeholder="请输入验证码" ></uni-easyinput>	
				</uni-forms-item>
				<uni-forms-item>
					还没有用户？点击旁边进行注册<button @click="register" style="float:right" size="mini">注册</button>
				</uni-forms-item>
				<button @click="loginSubmit" class="login">登录</button>
			</uni-forms>
		</uni-card>
	</view>
	<view v-if="isShowRegister">
		<uni-card>
			<uni-forms :model="form" ref="formRef">
				<uni-forms-item name="username" :rules="[{ required: true, errorMessage: '请输入用户名' }]">
					<uni-easyinput prefixIcon="person-filled" type="text" v-model="form.username" placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password" :rules="[{ required: true, errorMessage: '请输入密码' }]">
					<uni-easyinput prefixIcon="locked-filled" type="password" v-model="form.password" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					已有账户，返回登录页<button @click="register" style="float:right" size="mini">登录</button>
				</uni-forms-item>
				<button @click="registerSubmit" class="login">注册</button>
			</uni-forms>
		</uni-card>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useUserStore } from '../../stores/modules/user';
import { loginApi, registerApi } from '../../api/user';
const userStore = useUserStore()
const isShowLogin = ref(false)
const isShowRegister = ref(false)
const formRef = ref(null)
const form = reactive({
	username: null,
	password: null,
	code:null,
});

//按钮内容更换
const login = () => {
	isShowLogin.value = !isShowLogin.value
	// #ifdef H5
	const login = document.querySelector('.login')
	if(userStore.userInfo){
		login.innerHTML = '切换用户'
	}else{
		isShowLogin.value ? login.innerHTML = '取消登录' : login.innerHTML = '登录'
	}
	// #endif
}

//用户登录
const userLoginInfo = ref({})
const loginSubmit = async () => {
	formRef.value.validate().then(async ({ valid, errors }) => {
		if (valid) {
		} else {
			//验证通过
		const res =	await loginApi(form.username,form.password)
		if(res.data !== null){
			userLoginInfo.value = res.data
			uni.showToast({title:"登录成功"})
			//将用户数据存入pinia
			userStore.setUserInfo(userLoginInfo.value)
			userStore.setUserName(userStore.userInfo.username)
			form.username = ''
			form.password = ''
			form.code = ''
			login()
		}else{
			if(res.code === 201){
				uni.showToast({icon:'error',title:res.message})
			}else if(res.code === 202){
				uni.showToast({icon:'error',title:res.message})
			}else{
				uni.showToast({icon:'error',title:"验证码不正确"})
			}
		}
		}
	});
};

//退出登录
const logout = () => {
	if(userStore.userInfo){
	uni.showToast({title:"注销成功"})
	userStore.clearUserInfo()
	// #ifdef H5
	const login = document.querySelector('.login')
	login.innerHTML = '登录'
	// #endif
	}else{
	uni.showToast({icon:'error',title:"当前没有登录"})
	}
}

//注册与登录切换
const register = () => {
	isShowRegister.value = !isShowRegister.value
}

//用户注册
const registerSubmit = async () => {
	const res = await registerApi(JSON.stringify(form))
	if(res.code === 201){
		uni.showToast({icon:'error',title: res.message})
	}else{
		uni.showToast({title: res.message})
	}
}
</script>

<style scoped lang="less">
.login{
	background-color: #007aff;
	color: #fff;
}
.logout{
	background-color: #e64340;
	color: #fff;
}
.userInfo{
	display: flex;
	align-items: center;
	.avatar{
		width: 3.2rem;
		height: 3.2rem;
		border-radius: 50%;
		margin: 5px;
	}
	.info{
		font-size: 2rem;
	}
}


</style>